<template>

  <el-dialog title="标签数据-核心仅保留近14天的数据" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="900px">
  <div class="content-big">
    <div class="content-left">
      <div class="title">趋势分析</div>
      <div id="main" style="width: 100%; height: 500px"></div>
    </div>
    <div class="content-right">
      <el-table
        :data="tableDataList"
        ref="companylabelList"
      >
        <el-table-column
          :label="item.label"
          align="center"
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <div style="text-align: center">{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>

    <div class="footer-btn" slot="footer">
      <el-button  @click="handleCloseDialog">取消</el-button>
      <el-button type="primary">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts';
import {listUser} from "@/api/system/user";

export default {
  name: 'selectLabelPage',
  components: {
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      total: 8, // 表格的总条数
      tableColumns: [
        {key: 'name', label: `日期`, visible: true, minWidth: 150, fixed: true},
        {key: 'number', label: `客户数`, visible: true, minWidth: 150, fixed: true},
      ],
      tableDataList: [],
      tableHeight: 600,
    }
  },
  created() {
    this.tableDataList = [];
    for (let i = 0; i < 10; i++) {
      let obj = {
        name: '小红',
        label: '18207418337',
        operate: true,
      }
      this.tableDataList.push(obj);
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.getChart();
    })

  },
  watch: {},
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    getChart(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
    let  option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }
        ]
      };

      option && myChart.setOption(option);
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.content-big {
  display: flex;
  .content-left{
    width: 500px;
  }
  .content-right{
    flex: 1;
  }
}
</style>
